<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>A Gift to My Lover</title>
<link rel="stylesheet" type="text/css" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="lib/vegas/dist/vegas.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
  <div class="toolbar">
    <a id="first">
      <i class="fa fa-fw fa-step-backward"></i>
    </a>
    <a id="previous">
      <i class="fa fa-fw fa-backward"></i>
    </a>
    <a id="play">
      <i class="fa fa-fw fa-play"></i>
    </a>
    <a id="pause">
      <i class="fa fa-fw fa-pause"></i>
    </a>
    <a id="next">
      <i class="fa fa-fw fa-forward"></i>
    </a>
    <a id="last">
      <i class="fa fa-fw fa-step-forward "></i>
    </a>
    <a id="volume-on">
      <i class="fa fa-fw fa-volume-up"></i>
    </a>
    <a id="volume-off">
      <i class="fa fa-fw fa-volume-off"></i>
    </a>
    <a id="enter-fullscreen">
      <i class="fa fa-fw fa-arrows-alt"></i>
    </a>
    <a id="exit-fullscreen">
      <i class="fa fa-fw fa-times"></i>
    </a>
  </div>
  <div class="counter">
    <span id="counter"></span>
  </div>
  <div class="loading-container">
    <div class="loading-inner">
      <div class="loading">
        <div class="message" id="loading-message"></div>
        <div class="indicator" id="loading-indicator"></div>
      </div>
    </div>
  </div>
</body>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/vegas/dist/vegas.min.js"></script>
<script src="lib/buzz/dist/buzz.min.js"></script>
<script src="lib/progressbar.js/dist/progressbar.min.js"></script>
<script src="lib/sequence/sequence.js"></script>
<script src="lib/join/join.js"></script>
<script src="./config.js"></script>
<script src="./fullscreen.js"></script>
<script src="./music_player.js"></script>
<script src="./index.js"></script>
</html>